<template>
  <div>
    <a-layout-header class="header">
      <div class="logo">仿12306客户端</div>
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['1']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item class="user-info">
          <span class="username">用户: {{ username }}</span>
          <a-button type="primary" class="logout-btn" @click="logout">
            退出
          </a-button>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
  </div>
</template>

<script>
import { removeStorage } from "@/utils/storage";
import { mapMutations } from "vuex";

export default {
  name: "Header",
  data() {
    return {};
  },
  props: {
    username: {
      type: String,
      default: "",
    },
  },
  methods: {
    logout() {
      this.setToken(null);
      removeStorage("token");
      if (window.location.pathname !== "/login") {
        location.href = "/login";
      }
    },
    ...mapMutations("login", ["setToken"]),
  },
};
</script>

<style scoped lang="less">
.header {
  .logo {
    text-align: center;
    line-height: 35px;
    font-size: 20px;
    width: 150px;
    height: 31px;
    color: white;
    margin: 16px 28px 16px -15px;
    float: left;
  }
  .user-info {
    float: right;
    width: 300px;
    cursor: default;
    text-align: right;
    .username {
      margin-right: 20px;
      color: rgba(255, 255, 255, 0.65);
      cursor: default;
    }
  }
  .ant-menu.ant-menu-dark .ant-menu-item-selected,
  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    background-color: transparent !important;
  }
}
</style>
